<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">
<html>

<head>
	<meta charset="UTF-8">
	<title>Sign up</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-xl-8">
			<div class="container">
				<div class="row g-4 g-xxl-5">
					<div class="col-xl-9 mx-auto">
						<!-- Image -->
						<img th:src="@{/assets/images/bg/02.jpg}" class="rounded" alt="contact-bg">

						<!-- Contact form START -->
						<div class="row mt-n5 mt-sm-n7 mt-md-n9" style="margin-top: -17rem !important;">
							<div class="col-11 col-lg-9 mx-auto">
								<div class="card shadow p-4 p-sm-5 p-md-6">
									<!-- Card header -->
									<div class="card-header border-bottom px-0 pt-0 pb-5">
										<!-- Title -->
										<h1 class="mb-3 h3">Create your account</h1>
										<p class="mb-0">Already have an account?<a th:href="@{/user/signin}">Sign in here</a></p>
										<p class="mb-0" style="color: red" 
											th:if="${error}"             
										    th:text="${error}">
										</p>
										<script type="text/javascript" th:if="${success}">
											layer.alert('[[${success}]]');
										</script>
									</div>
									<!-- Card body & form -->
									<form class="card-body px-0 pb-0 pt-5" th:action="@{/user/register}" method="post">
										<!-- Name -->
										<div class="input-floating-label form-floating mb-4">
											<select class="form-control bg-transparent" name="roleType">
												<option value="0">Student</option>
												<option value="1">Staff</option>
											</select>
											<label for="floatingName">Role</label>
										</div>
										<div class="input-floating-label form-floating mb-4">
											<input type="text" class="form-control bg-transparent" name="account" >
											<label for="floatingName">Account</label>
										</div>
										<div class="input-floating-label form-floating mb-4">
											<input type="text" class="form-control bg-transparent" name="name" >
											<label for="floatingName">Name</label>
										</div>
										<div class="input-floating-label form-floating mb-4">
											<input type="text" class="form-control bg-transparent" name="mobile" >
											<label for="floatingName">Mobile</label>
										</div>
										<!-- Email -->
										<div class="input-floating-label form-floating mb-4">
											<input type="password" class="form-control bg-transparent" name="password">
											<label for="floatingInput">Password</label>
										</div>
										<!-- Button -->
										<button type="submit" class="btn btn-lg btn-primary mb-0">Create your account</button>
										<p class="mb-0 mt-2 text-end small"><i class="bi bi-question-circle-fill text-danger me-2"></i>Privacy Policy.
										<a target="_blank" th:href="@{/accountLaw}" class="mb-0">Look At</a></p>
									</form>
								</div>
							</div>
						</div>
						<!-- Contact form END -->
					</div>
				</div> <!-- Row END -->
			</div>
		</section>
	</div>
	<script type="text/javascript" layout:fragment="script">
		
	</script>
</body>

</html>